import * as echarts from 'echarts'

const PRESET_COLORS = [
  '#3FA9F5',
  '#45C572',
  '#eea44f',
  '#e95a39',
  '#e5174b',
  '#722BE1',
  '#DECC44',
  '#E4A239',
  '#E37233',
  '#DB3C29'
]

function getPresetColor(idx) {
  const ridx = idx % PRESET_COLORS.length
  return PRESET_COLORS[ridx]
}

// 趋势变化 折线图
export const lineChart = (id, data, opt = {}) => {
  console.log(id, data, 'economicFractureChartBig')
  data = data ? data : {}
  // y轴字体颜色
  const Ytextcolor = '#666666'
  // x轴字体颜色
  const Xtextcolor = '#666666'
  // y,x轴线颜色
  const Ylinecolor = '#bfbfbf'
  // 内测y,x轴线颜色
  const withinLinecolor = '#e6e6e6'
  //   线段 背景渐变
  // const lineColors = [
  //   {
  //     line: '#3399ff', //   线段颜色
  //     gradientStart: '#FF9929', //   渐变
  //     gradientEnd: '#FF7629' //
  //   }
  // ]

  const option = {
    tooltip: {
      trigger: 'axis',
      // backgroundColor: "#fff",
      backgroundColor: 'rgba(9, 20, 37, 0.75)',
      borderWidth: 1,
      textStyle: {
        fontSize: 14,
        // color: "#999",
        color: '#fff',
        fontFamily: 'PingFang-SC-Medium'
      }
      // formatter: function (params) {
      //   const { value, axisValue } = params[0]

      //   return `<span> ${axisValue}</span><span> ${value} </span><span>${data.unit || ''}</span>`
      // }
    },
    grid: {
      top: opt.gridTop || '18%',
      left: opt.gridLeft || '10%',
      right: opt.gridRight || '5%',
      bottom: opt.gridBottom || '10%',
      containLabel: true
    },
    legend: {
      show: true,
      selected: '',
      data: data.legends || data.legend,
      // top: '10%',
      right: '10%',
      textStyle: {
        color: Ytextcolor,
        fontSize: '12',
        fontFamily: 'PingFang-SC-Medium'
      },
      icon: 'rect',
      itemWidth: 12,
      itemHeight: 2
    },
    xAxis: {
      axisTick: {
        show: true,
        inside: true
      },
      axisLabel: {
        show: true,
        interval: 'auto',
        textStyle: {
          color: Xtextcolor
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: Ylinecolor
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: withinLinecolor
        }
      },
      type: 'category',
      boundaryGap: false,
      data: data.xaxis || data.xAxis
    },

    yAxis: {
      min: function (value) {
        // 取最小值向下取整为最小刻度
        return Math.floor(value.min)
      },
      max: function (value) {
        // 取最大值向上取整为最大刻度
        return Math.ceil(value.max)
      },
      // name: "车辆数" + "/" + data.unit,
      name: data.unit || '',
      nameTextStyle: {
        color: Ytextcolor,
        fontSize: 11,
        align: 'right',
        lineHeight: 11
      },
      nameGap: 5,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: withinLinecolor
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: Ylinecolor
        },
        interval: 'auto',
        formatter: '{value}(%)'
      },

      axisLabel: {
        // y轴文字的配置
        textStyle: {
          color: Ytextcolor,
          fontSize: 11
        },
        formatter: (val, key) => {
          if (key % 2 == 0) {
            return val
          }
        }
        // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
      }
    },
    series: data.series.map((s, i) => {
      const sType = s.type
      return {
        type: sType,
        data: s.data,
        name: data.legend[i],
        showAllSymbol: true,
        symbol: 'circle',
        symbolSize: 8, // 标记的大小
        itemStyle: {
          normal: {
            color: '#fff', // 拐点颜色
            borderColor: getPresetColor(i),
            borderWidth: 1,
            lineStyle: {
              width: 2,
              shadowColor: 'rgb(0, 0, 0,.16)',
              shadowBlur: 10,
              shadowOffsetY: 10
            }
          },
          emphasis: {
            color: getPresetColor(i),
            borderColor: '#fff',
            borderWidth: 2
          }
        },
        lineStyle: {
          normal: {
            color: getPresetColor(i)
          },
          borderColor: getPresetColor(i)
        }
        // areaStyle: {
        //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //     {
        //       offset: 0,
        //       color: lineColors[0].gradientStart
        //     },
        //     {
        //       offset: 1,
        //       color: lineColors[0].gradientEnd
        //       //   color: "transparent",
        //     }
        //   ]),
        //   borderColor: lineColors[0]
        // }
      }
    })
  }
  const client = document.getElementById(id)
  const myChart = echarts.init(client)
  const clientWidth = client.clientWidth
  myChart.clear()
  myChart.resize({ width: clientWidth })
  myChart.setOption(option)
  return myChart
}

export const barChart = (id, data, opt = {}) => {
  console.log(id, data, 'economicFractureChartBig')
  data = data ? data : {}
  // y轴字体颜色
  const Ytextcolor = '#666666'
  // x轴字体颜色
  const Xtextcolor = '#666666'
  // y,x轴线颜色
  const Ylinecolor = '#bfbfbf'
  // 内测y,x轴线颜色
  const withinLinecolor = '#e6e6e6'
  //   线段 背景渐变
  const lineColors = [
    {
      line: '#3399ff', //   线段颜色
      gradientStart: '#66BFFF', //   渐变
      gradientEnd: '#2681FF' //
    }
  ]

  const option = {
    tooltip: {
      trigger: 'axis',
      // backgroundColor: "#fff",
      backgroundColor: 'rgba(9, 20, 37, 0.75)',
      borderWidth: 1,
      textStyle: {
        fontSize: 14,
        // color: "#999",
        color: '#fff',
        fontFamily: 'PingFang-SC-Medium'
      },
      formatter: function (params) {
        const { value, axisValue } = params[0]

        return `<span> ${axisValue}</span><span> ${value} </span><span>${data.unit || ''}</span>`
      }
    },
    grid: {
      top: opt.gridTop || '18%',
      left: opt.gridLeft || '10%',
      right: opt.gridRight || '5%',
      bottom: opt.gridBottom || '10%',
      containLabel: true
    },
    legend: {
      show: true,
      selected: '',
      data: data.legends || data.legend,
      // top: '10%',
      // right: '10%',
      textStyle: {
        color: Ytextcolor,
        fontSize: '12',
        fontFamily: 'PingFang-SC-Medium'
      },
      icon: 'rect',
      itemWidth: 12,
      itemHeight: 2
    },
    xAxis: {
      axisTick: {
        show: true,
        inside: true
      },
      axisLabel: {
        show: true,
        interval: 'auto',
        textStyle: {
          color: Xtextcolor,
          fontSize: 10
        }
      },
      axisPointer: {
        show: true,
        type: 'shadow',
        shadowStyle: {
          color: '#3d76cc',
          opacity: 0.1
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: Ylinecolor
        }
      },
      splitLine: {
        show: true,
        interval: 0,
        lineStyle: {
          type: 'dashed',
          color: withinLinecolor
        }
      },
      // type: "category",
      // boundaryGap: false,
      data: data.xaxis || data.xAxis
    },

    yAxis: {
      min: function (value) {
        // 取最小值向下取整为最小刻度
        return Math.floor(value.min)
      },
      max: function (value) {
        // 取最大值向上取整为最大刻度
        return Math.ceil(value.max)
      },
      // name: "车辆数" + "/" + data.unit,
      name: data.unit || '',
      nameTextStyle: {
        color: Ytextcolor,
        fontSize: 11,
        align: 'right',
        lineHeight: 11
      },
      nameGap: 5,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: withinLinecolor
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: Ylinecolor
        },
        interval: 'auto',
        formatter: '{value}(%)'
      },

      axisLabel: {
        // y轴文字的配置
        textStyle: {
          color: Ytextcolor,
          fontSize: 10
        },
        formatter: (val, key) => {
          if (key % 2 == 0) {
            return val
          }
        }
        // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
      }
    },
    series: data.series.map(s => {
      const sType = s.type
      return {
        type: sType,
        data: s.data,
        name: data.xaxis || data.xAxis,
        showAllSymbol: true,
        barWidth: '11px',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: lineColors[0].gradientStart
            },
            {
              offset: 1,
              color: lineColors[0].gradientEnd
              //   color: "transparent",
            }
          ])
        }
      }
    })
  }
  const client = document.getElementById(id)
  const myChart = echarts.init(client)
  const clientWidth = client.clientWidth
  myChart.clear()
  myChart.resize({ width: clientWidth })
  myChart.setOption(option)
  return myChart
}
